<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.table.formManagement.formPropertyPage')"
    @register="register"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :minHeight="300"
    :width="600"
  >
    <Row :gutter="12">
      <Col :span="12">
        <Divider>{{ t('routes.table.formManagement.PropertyPageList') }}</Divider>
        <div style="height: 250px; overflow-x: hidden">
          <BasicTable @register="registerTable" />
        </div>
        <div style="margin-top: 20px">
          <a-button type="primary" @click="addAttrDefine">{{ t('common.create') }}</a-button>
          <Divider type="vertical" />
          <a-button color="error" @click="deleteAttrDefine">{{ t('common.delete') }}</a-button>
        </div>
      </Col>
      <Col :span="12">
        <Divider>{{ t('routes.table.formManagement.PropertyPageInfo') }}</Divider>
        <div>{{ t('routes.table.formManagement.PropertyPageName') }}</div>
        <div>
          <Input v-model:value="attrName" @change="changeAttrName" />
        </div>
        <div style="margin-top: 10px">{{ t('routes.table.formManagement.PropertyGroupList') }}</div>
        <div style="height: 160px; overflow-x: hidden">
          <div style="display: flex; flex-direction: column; height: 100%">
            <Checkbox
              v-for="(item, index) in colList"
              :key="index"
              v-model:checked="item.isSelect"
              >{{ item.label }}</Checkbox
            >
          </div>
        </div>
      </Col>
    </Row>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Row, Col, Divider, Input, Checkbox } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { getAttrGroupColumns } from './data';

  import {
    GetAllBdPropertyPageAndTeam,
    GetBdPropertyPageAndTeam,
    ChangeBdPropertyPageAndTeam,
  } from '/@/api/demo/system';

  const { t } = useI18n();
  const dataList = ref([]);
  const attrName = ref('');
  const colList = ref([]);
  const currentIndex = ref('');
  const PageAndTeam = ref([]);
  const addList = ref([]);
  const { createMessage } = useMessage();

  // 新增属性页
  const addAttrDefine = () => {
    // 获取列表数组最后一位
    dataList.value.push({
      id: (Number(dataList.value[dataList.value.length - 1].id) + 1).toString(),
      name: '属性页' + (dataList.value.length + 1),
      index: dataList.value.length,
      remark: 0,
    });
    // 默认选中数组最后一位
    currentIndex.value = dataList.value[dataList.value.length - 1].id;
    attrName.value = dataList.value[dataList.value.length - 1].name;
    GetBdPropertyPageAndTeam('').then((res) => {
      res.map((item) => (item.pageid = currentIndex.value));
      addList.value = res;
      PageAndTeam.value = [...PageAndTeam.value, ...addList.value];
      colList.value = PageAndTeam.value.filter((item) => item.pageid === currentIndex.value);
    });
  };

  // 删除属性页
  const deleteAttrDefine = () => {
    if (currentIndex.value) {
      dataList.value = dataList.value.filter((item) => item.id !== currentIndex.value);
      // 删除属性页后，默认选中数组最后一位
      currentIndex.value = dataList.value[dataList.value.length - 1].id;
      attrName.value = dataList.value[dataList.value.length - 1].name;
      colList.value = PageAndTeam.value.filter((item) => item.pageid === currentIndex.value);
      PageAndTeam.value = PageAndTeam.value.filter((item) => item.pageid !== currentIndex.value);
    }
  };

  // 属性页名称修改
  const changeAttrName = () => {
    dataList.value.map((item) => {
      if (item.id === currentIndex.value) {
        item.name = attrName.value;
      }
    });
  };

  // 表单提交事件
  const handleSubmit = () => {
    PageAndTeam.value.map((item) =>
      item.isSelect === true ? (item.isSelect = '1') : (item.isSelect = '0'),
    );
    const params = {
      listPage: dataList.value,
      listPageAndTeam: PageAndTeam.value,
    };
    ChangeBdPropertyPageAndTeam(params).then((res) => {
      if (res) {
        createMessage.success(t('common.saveSuccess'));
        closeModal();
      }
    });
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
    GetAllBdPropertyPageAndTeam().then((res) => {
      dataList.value = res.listPage;
      currentIndex.value = res.listPage[0].id;
      attrName.value = res.listPage[0].name;
      PageAndTeam.value = res.listPageAndTeam;
      colList.value = PageAndTeam.value.filter((item) => item.pageid === currentIndex.value);
      colList.value.map((item) =>
        item.isSelect === '1' ? (item.isSelect = true) : (item.isSelect = false),
      );
    });
  });

  // 初始化表格
  const [registerTable] = useTable({
    columns: getAttrGroupColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
    striped: false,
    rowKey: 'id',
    dataSource: dataList,
    pagination: false,
    showHeader: false,
    customRow: (record) => {
      return {
        onClick: () => {
          currentIndex.value = record.id;
          attrName.value = record.name;
          colList.value = PageAndTeam.value.filter((item) => item.pageid === currentIndex.value);
          colList.value.map((item) =>
            item.isSelect === '1' || item.isSelect === true
              ? (item.isSelect = true)
              : (item.isSelect = false),
          );
        },
      };
    },
    rowClassName: (record: any) => {
      return record.id === currentIndex.value ? 'clickRowStyle' : '';
    },
  });
</script>

<style lang="less" scoped>
  ::v-deep(.clickRowStyle) {
    background-color: #e6f7ff !important;
  }

  ::v-deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {
    margin-left: 0 !important;
  }
</style>
